<!--
  功能：选择图片弹窗组件
  时间：2023年03月06日 17:38:14
-->
<template>
  <el-dialog
    v-model="props.modelValue"
    title="选择图片"
    width="1200px"
    draggable
    :before-close="close"
  >
    <div class="an-img">
      <div class="flex v1">
        <el-image
          class="v2"
          v-for="(v, i) in pageData.list"
          :key="i"
          @click="successImg(v)"
          :src="config.qnUrl + v + '?imageView2/0/format/webp/q/75'"
          fit="contain"
        ></el-image>
      </div>
    </div>
    <template #footer>
      <div class="flex footer">
        <div>
          <el-pagination
            background
            @current-change="switchCurrentChange"
            v-model:currentPage="pageData.page"
            :default-page-size="pageData.limit"
            layout="total,prev, pager, next"
            :total="pageData.total"
          >
          </el-pagination>
        </div>
        <div class="flex">
          <el-upload
            :data="{ token: 'xxx' }"
            :http-request="'http://www.baidu.com'"
            :multiple="true"
            :before-upload="beforeUploadFn"
            :show-file-list="false"
            action="http://upload-z2.qiniup.com"
            :auto-upload="true"
          >
            <el-button type="primary">多图上传</el-button>
          </el-upload>

          <!-- 图片裁剪组件 -->
          <cropper-img @img="successImg" />

          <el-button>取消</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { cropperImg, upImg } from "@/components/upImg";
import { ElMessage } from "element-plus";
import config from "@/common/config";

const emit = defineEmits<{
  (e: "update:modelValue", data: boolean): void; //向父组件更新 弹窗是否显示
  (e: "getImg", data?: { imgUrl: string }): void; //向父组件传递 已选择的图片
}>();

const props = defineProps({
  //是否显示
  modelValue: {
    type: Boolean,
    required: true,
    default: false,
  },
});

// 页面数据
const pageData = reactive<any>({
  list: [], //图片列表
  spaceList: "",
  total: 0,
  page: 1,
  limit: 65,
  selectIndex: -1,
  selectValue: null,
});

onMounted(() => {
  getList();
});

//模拟后台返回图片列表
function getList() {
  pageData.list = [
    "other/verify1.jpg",
    "other/verify2.jpg",
    "other/verify3.jpg",
    "other/verify4.jpg",
    "other/verify5.jpg",
  ];
}

//关闭弹窗
function close() {
  emit("update:modelValue", false);
}

// 点击分页
function switchCurrentChange(val: number) {
  console.log(`当前页: ${val}`);
  // getList();
}

//接收组件上传图片成功状态
//裁剪模式，直接默认选择图片，多图模式需要自行选择图片
function successImg(data: any) {
  emit("update:modelValue", false);
  emit("getImg", {
    imgUrl: data,
  });
}

//图片上传之前
async function beforeUploadFn(file: HTMLInputElement) {
  //获取文件后缀
  let index = file.type.lastIndexOf("/");
  let type = file.type.substring(index + 1, file.type.length);
  const isJPG =
    file.type === "image/jpeg" ||
    file.type === "image/png" ||
    file.type === "image/gif" ||
    file.type === "image/webp";
  if (!isJPG) {
    ElMessage.error("文件只能是 jpeg、png、gif 格式!");
    return false;
  }
  const isLt1M = file.size / 1024 / 1024 < 1;
  if (!isLt1M) {
    ElMessage.error("上传图片大小不能超过 1MB!");
    return false;
  }

  //预览后台，操作提示 上传拦截
  if (isJPG && isLt1M) {
    ElMessage.error("上传功能需自己对接后台！！！");
    return false;
  }

  return isJPG && isLt1M;
}
</script>
<style scoped lang="scss">
.v1 {
  flex-wrap: wrap;
}
.v2 {
  border: 1px solid #f1f1f1;
  width: 80px;
  height: 80px;
  border-radius: 5px;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  &:hover {
    border-color: var(--el-color-primary);
  }

  &:nth-child(13n) {
    margin-right: 0;
  }
}
.v3 {
  position: relative;
  margin-left: 15px;
  overflow: hidden;
  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
  }
}

.footer {
  justify-content: space-between;
}
</style>
